import './Shangjia.css';
import { useEffect, useState, useRef, useMemo } from 'react';
import '@nutui/nutui-react/dist/style.css';
import { Menu, Button, MenuItem } from '@nutui/nutui-react';
import { Sticky } from 'react-vant';
import axios from 'axios';
import {useNavigate} from 'react-router-dom'

function Shangjia() {
    let [list, setList] = useState([]);
    let navigate=useNavigate()
    let [cate, setCate] = useState([]);
    useEffect(() => {
        getshangjia();
        getcate();
    }, []);

    let getcate = async () => {
        let { data } = await axios.get('http://localhost:3000/datacate');
        console.log(data);
        if (data.code === 200) {
            setCate(data.data);
        }
    };

    let getshangjia = async () => {
        let { data } = await axios.get('http://localhost:3000/datashangjia');
        console.log(data);
        if (data.code === 200) {
            setList(data.data);
        }
    };

    const [options] = useState([
        { text: '默认排序', value: 0 },
        { text: '离我最近', value: 2 },
    ]);
    const [options1] = useState([
        { text: '店内自提', value: 0 },
        { text: '外卖', value: 2 },
    ]);
    const itemRef = useRef(null);

    let sort = (option) => {
        console.log(option);
        let copy = [...list];
        if (option.value === 0) {
            copy.sort((a, b) => {
                return a.num - b.num;
            });
            setList(copy);
        } else if (option.value === 2) {
            copy.sort((a, b) => {
                return b.num - a.num;
            });
            setList(copy);
        }
    };

    let sort1 = (option) => {
        console.log(itemRef.current);
        console.log(option);

        let copy = [...list];
        // 使用 filter 方法筛选出满足条件的所有元素
        copy = copy.filter((item) => item.leibie === (option.value === 0? '店内自提' : '外卖'));
        setList(copy);

    };

    const handleConfirmClick = () => {
        console.log('确认按钮被点击');
        // 在这里执行确认按钮的逻辑
        itemRef.current.close(); // 关闭筛选菜单
        
    };

    return (
        <div>
            <Sticky>
                <div className='box'>
                    <h2>美团点餐</h2>
                </div>
                <div style={{ width: '100%', height: '50px', background: '#fff' }}>
                    <Menu>
                        <Menu.Item title='默认排序' options={options} ref={itemRef} onChange={sort} />
                        <Menu.Item title="筛选" ref={itemRef}>
                            <div
                                style={{
                                    width: '50%',
                                    lineHeight: '28px',
                                    padding: '0 30px',
                                }}
                            >
                                {options1.map((item, index) => (
                                    <Button key={index} onClick={sort1} value={item.value}>
                                        {item.text}
                                    </Button>
                                ))}
                            </div>
                            <Button size="small" onClick={handleConfirmClick}>
                                确认
                            </Button>
                        </Menu.Item>
                    </Menu>
                </div>
            </Sticky>
            <div>
                {list.map((item, index) => (
                    <div key={index} onClick={()=>navigate('/list?id='+item._id+'&name='+item.name)}>
                        <div className='box1' style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
                            <img src={item.img} style={{ width: '100px', height: '100px' }} alt="" />
                            <div className='box2'>
                                <span>{item.name}</span>
                                <p>{item.price}</p>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default Shangjia;